<template>
	<tm-fullView>
		<tm-menubars title="展开更多" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24" :padding="[0, 0]" color="bg-gradient-primary-lighten">
			<tm-more iconColor="white" bgColor="bg-gradient-primary-lighten">
				<view class="text-size-n pa-24">
					以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：
					列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，
					单元格颜色的控制。超过宽度自动横向拖动。
					<tm-images src="https://picsum.photos/300"></tm-images>
				</view>
			</tm-more>
		</tm-sheet>
		<tm-sheet :shadow="24" :padding="[0, 0]">
			<tm-more showMask :isRemovBar="true">
				<view class="text-size-n pa-24">
					展开后，底下的更多将不再显示-----以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：
					列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，
					单元格颜色的控制。超过宽度自动横向拖动。
				</view>
			</tm-more>
		</tm-sheet>
		<tm-sheet :shadow="24" :padding="[0, 0]" color="bg-gradient-primary-lighten">
			<tm-more iconColor="white" bgColor="bg-gradient-primary-lighten">
				<template v-slot:default>
					<view class="text-size-n pa-24">
						以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：
						列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，
						单元格颜色的控制。超过宽度自动横向拖动。
						<tm-images src="https://picsum.photos/300"></tm-images>
					</view>
				</template>
				<template v-slot:more="{ data }">
					<text class="text-white">{{ data ? '收缩更多' : '展开更多' }}</text>
				</template>
			</tm-more>
		</tm-sheet>
		<tm-sheet :shadow="24" :padding="[0, 0]">
			<tm-more><view class="text-size-n pa-24">没有超过指定高度不显示展开更多按钮条</view></tm-more>
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmTranslate from "@/tm-vuetify/components/tm-translate/tm-translate.vue"
	import tmMore from "@/tm-vuetify/components/tm-more/tm-more.vue"
	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmTranslate,tmMore,tmImages},
	data() {
		return {};
	},
	methods: {}
};
</script>

<style></style>
